<template>
  <div class="home">
    <!-- 顶部导航栏 -->
    <van-nav-bar title="首页" />

    <!-- 卡片网格 -->
    <van-grid :column-num="3" :gutter="10" :border="false">
      <van-grid-item v-for="item in gridItems" :key="item.text" :icon="item.icon" :text="item.text" />
    </van-grid>

    <!-- 轮播图 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img :src="image" />
      </van-swipe-item>
    </van-swipe>


  </div>
</template>

<script setup>
import { ref } from 'vue';

// 轮播图图片数组
const images = ref([
  'https://cdn7.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/u159.svg',
  'https://cdn7.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/u159.svg',
  'https://cdn7.axureshop.com/demo2024/2251242/images/%E9%A6%96%E9%A1%B5_%E6%9C%AA%E7%99%BB%E5%BD%95/u159.svg',
]);

// 网格卡片数据
const gridItems = ref([
  { text: '卡片1', icon: 'photo-o' },
  { text: '卡片2', icon: 'goods-collect-o' },
  { text: '卡片3', icon: 'cart-o' },
  { text: '卡片4', icon: 'points' },
  { text: '卡片5', icon: 'like-o' },
  { text: '卡片6', icon: 'search' },
]);
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.my-swipe img {
  width: 100%;
  display: block;
}
</style>